<template>
  <el-container class="page-main-v curr-sty">
    <el-row>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input"
        style="margin-left: 10px"
      >
      </el-input>
      <div style="margin-left: 10px;">
        内容：
        <el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
      </div>
      <div style="margin-left: 10px;">
        选择日期：
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
      <el-select
        v-model="value"
        placeholder="请选择"
        style="margin-left: 10px;"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :height="contentHeight"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.length"
      :hide-on-single-page="tableData.length <= 10"
      @current-change="handleCurrentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    >
    </el-pagination>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      contentHeight: (state) => state.contentHeight,
    }),
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
      input: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      dateValue: "",
    };
  },
  methods: {
    //点击页码切换分页触发
    handleCurrentChange(event) {
      console.log(event);
    },
    //点击上一页
    prevClick(event) {
      console.log(event);
    },
    //点击下一页
    nextClick(event) {
      console.log(event);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.curr-sty {
  display: flex;
  flex-direction: column !important;
}
.el-pagination {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.el-row {
  background: #ffffff;
  border-bottom: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.el-row .el-input {
  width: 200px;
}
</style>
